import React from "react"
import ProjectCard from "./components/ProjectCard"
import Masonry from "react-masonry-css"
import { projectsData } from "../mock/mockdata"
import styles from "./HomePage.module.scss"

const HomePage: React.FC = () => {
  // 配置瀑布流列数
  const breakpointColumnsObj = {
    default: 4, // 默认4列
    1100: 3, // 屏幕宽度小于1100px时显示3列
    700: 2, // 屏幕宽度小于700px时显示2列
    500: 1, // 屏幕宽度小于500px时显示1列
  }

  return (
    <div>
      <h1 className={styles["custom-h1"]}>My Projects</h1>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className={styles["my-masonry-grid"]}
        columnClassName={styles["my-masonry-grid_column"]}
      >
        {projectsData.map((project) => (
          <div key={project.id}>
            <ProjectCard project={project} />
          </div>
        ))}
      </Masonry>
    </div>
  )
}

export default HomePage
